<template>
  <!--隐患整改卡片外容器-->
  <div class="clean-pitfall-card">
    <div class="clean-pitfall-card-container">
      <!--title及进度外容器-->
      <div class="title-state">
        <div class="left-title">
          <img src="@/assets/images/cleanPitfallCard/blue-ring.png">
          <span>整改日志</span>
        </div>
<!--        <div class="right-state">-->
<!--          <el-progress :width="50" type="circle" :percentage="dataItem.schedule"></el-progress>-->
<!--        </div>-->
      </div>
      <!--整改情况内容容器-->
      <div class="clean-content-pot">
        <span class="clean-label">整改过程记录描述：</span>
        <span class="content">{{ dataItem.situation }}</span>
      </div>
      <div class="clean-content-pot"  style="padding-top: 0">
        <span class="clean-label">整改日期：</span>
        <span class="content">{{ dataItem.repairTime }}</span>
      </div>
      <!--附件容器-->
      <div class="annex-pot">
        <span class="annex-label">整改过程的相关文件：</span>
        <!--附件列表-->
        <show-file-list :file-list="dataItem.repairFileVos" :show-close="false"></show-file-list>
      </div>
    </div>
  </div>
</template>

<script>
import ShowFileList from "@/components/ShowFileList/index.vue";

export default {
  components: {
    ShowFileList,
  },
  props: {
    dataItem: {
      type: Object
    }
  },
  data() {
    return {
      fileList: Array.from(Array(5)).map((item, index) => {
        return {
          fileName: `测试${index + 1}`,
          fileId: index + 1
        }
      })
    }
  }
}

</script>


<style lang="scss" scoped>
//设置隐患整改卡片外容器的样式
.clean-pitfall-card {
  width: 100%;
  //不设高度由内容撑开
  margin-bottom: 15px;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;

  //background: pink;
  //设置内容器的样式，主要用于内容两侧的缩进
  .clean-pitfall-card-container {
    width: 90%; //用于设置内容的缩进

    //background: yellow;
    margin: 0 auto;
    //设置title及进度外容器样式
    .title-state {
      width: 100%;
      height: 80px;
      //background: deepskyblue;
      border-bottom: 1px solid rgba(228, 231, 237, 1);
      //设置内部容器位置
      display: flex;
      align-items: center;
      justify-content: space-between;
      //设置左侧title容器样式
      .left-title {
        //设置内部元素样式
        display: flex;
        align-items: center;
        //设置蓝圆圈样式
        img {
          margin-right: 10px; //与右侧文本间距
        }
      }

      //设置右侧进度条容器样式
      .right-state {
        height: 100%;
        //设置进度条位置
        display: flex;
        align-items: center;
      }
    }

    // 设置整改情况容器样式
    .clean-content-pot {
      width: 100%;
      //高度由内容撑开
      margin-bottom: 20px; //设置与下方内容间距
      // 设置内容位置
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      // 设置整改内容标题样式
      .clean-label {
        width: 20%;
        color: rgba(144, 147, 153, 1);
        font-size: 14px;
      }

      // 设置整改内容样式
      .content {
        width: 75%;
        font-size: 14px;
      }
    }

    // 设置附件容器样式
    .annex-pot {
      width: 100%;
      //高度由内容撑开
      //设置内部元素位置
      display: flex;
      justify-content: space-between;
      //设置附件标题样式
      .annex-label {
        width: 20%;
        color: rgba(144, 147, 153, 1);
        font-size: 14px;
        margin-right: 5%; //设置与右侧文件间距
      }

    }
  }
}
</style>
